<template>
    <div class="yuan-container achievement-container">
        <a-spin tip="Loading..." :spinning="loading">
            <a-card title="我的成果">
                <a-tabs type="card" :default-active-key="pageType" @change="tabChange">
                    <a-tab-pane tab="成果公示" key="CGZH" v-if="userInfo.roleName==='管理员' || userInfo.roleName==='后台'"></a-tab-pane>
                    <a-tab-pane tab="现金奖励公示" key="KJR"></a-tab-pane>
                    <a-tab-pane tab="重要贡献人奖励公示" key="GXR"></a-tab-pane>
                </a-tabs>

                <div class="filter-panel">
                    <div class="filter-list">
                        <span>关键字：</span>
                        <a-input-search allowClear v-model="pageParams.name" placeholder="请输入负责人、成果名称" @search="resetList" />
                    </div>
                    <div class="filter-list">
                        <span>对接成果时间：</span>
                        <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']"
                            :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                    </div>
                    <div class="filter-list">
                        <span>成果类别：</span>
                        <a-select v-model="pageParams.achievementCategory" @change="resetList" allowClear placeholder="请选择成果类别">
                            <a-select-option value="发明专利">发明专利</a-select-option>
                            <a-select-option value="实用新型专利">实用新型专利</a-select-option>
                            <a-select-option value="外观设计专利">外观设计专利</a-select-option>
                            <a-select-option value="技术">技术</a-select-option>
                            <a-select-option value="软件著作权">软件著作权</a-select-option>
                            <a-select-option value="版权等其他著作权">版权等其他著作权</a-select-option>
                            <a-select-option value="集成电路布图设计">集成电路布图设计</a-select-option>
                            <a-select-option value="植物新品种">植物新品种</a-select-option>
                            <a-select-option value="其他">其他</a-select-option>
                        </a-select>
                    </div>
                    <div class="filter-list">
                        <span>技术类别：</span>
                        <a-select v-model="pageParams.belongToTechnologyCategory" @change="resetList" allowClear
                            placeholder="请选择所属技术类别">
                            <a-select-option v-for="item in territoryList" :value="item.content"
                                :key="item.id">{{item.content}}</a-select-option>
                        </a-select>
                    </div>

                </div>
                <div class="table">
                    <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                        :pagination="pagination">
                        <template slot='action' slot-scope="text, record, index">
                            <div>
                                <template v-if="pageType==='CGZH'">
                                    <a-button type="primary" @click="clickEdit(record)"
                                        v-if="record.formulaAuditState!==2">编辑公示</a-button>

                                    <a-button type="danger" @click="clickDetail(record)" style="margin-left:10px">对接详情</a-button>

                                    <template v-if="userInfo.roleName==='后台' || userInfo.roleName==='管理员'">
                                        <a-button type="warning" @click="clickCancel(record)" style="margin-left:10px"
                                            v-if="record.formulaAuditState===2">取消公示</a-button>

                                        <a-button style="margin-left:10px" type="success" @click="clickFormula(record)"
                                            v-else-if="record.formulaAuditState===1">一键公示</a-button>

                                    </template>

                                </template>

                                <template v-else>
                                    <a-button type="primary" @click="clickShowEditList(record)"
                                        style="margin-left:10px">编辑公示</a-button>
                                    <a-button type="danger" @click="clickDetail(record)" style="margin-left:10px">对接详情</a-button>
                                </template>
                            </div>
                        </template>
                    </a-table>
                </div>
            </a-card>
            <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :detailId="detailId" :publicityType="pageType"/>
            <CGZHDetail :visible="editVisible" @closeModal="() => editVisible = false" :rowInfo="editInfo" @resetList="getList" />
            <ShowEditList :visible="showEditListVisible" @closeModal="() => showEditListVisible = false"
                :rowInfo="showEditListInfo" :pageType="pageType" />
        </a-spin>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import { Component, Vue } from "vue-property-decorator";
import { h } from "vue";
import DetailVue from "./detail.vue";
import CGZHDetail from "./CGZHDetail.vue";
import ShowEditList from "./showEditList.vue";
import { getStorageUserInfo } from "@/utils";
@Component({
    name: "tpl",
    components: { DetailVue, CGZHDetail, ShowEditList },
})
export default class extends Vue {
    pageParams: any = {
        date: [],
    };
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    columns: any[] = [];

    defcolumns: any[] = [
        {
            title: "序号",
            dataIndex: "index",
            key: "index",
            align: "center",
            customRender: (text: string, record: any, index: number) => `${index + 1}`,
        },
        {
            align: "center",
            dataIndex: "achievementPrincipal",
            key: "achievementPrincipal",
            title: "成果负责人",
        },
        {
            align: "center",
            dataIndex: "achievementName",
            key: "achievementName",
            title: "成果名称",
        },
        {
            align: "center",
            dataIndex: "demandName",
            key: "demandName",
            title: "对接需求",
        },
        {
            align: "center",
            dataIndex: "achievementCategory",
            key: "achievementCategory",
            title: "成果类别",
        },
        {
            align: "center",
            dataIndex: "belongToTechnologyCategory",
            key: "belongToTechnologyCategory",
            title: "所属技术类别",
            customRender: (text: string, record: any, index: number) => {
                return record.belongToTechnologyCategory ? record.belongToTechnologyCategory.join(",") : "";
            },
        },

        {
            align: "center",
            dataIndex: "abutmentTime",
            key: "abutmentTime",
            title: "对接成果时间",
        },
    ];
    userInfo: any = {};
    async mounted() {
        this.userInfo = getStorageUserInfo();
        this.pageType = this.userInfo.roleName === "管理员" || this.userInfo.roleName === "后台" ? "CGZH" : "KJR";
        await this.getTerritoryList();
        this.tabChange(this.pageType);
    }
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await api.getAnMentList({
                pageNum: this.pagination.current,
                pageSize: this.pagination.pageSize,
                publicityType: this.pageType,
                ...this.pageParams,
            });
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    pageType = "";
    tabChange(e) {
        this.pageType = e;
        this.resetList();
        if (this.pageType === "CGZH") {
            this.columns = this.defcolumns.concat([
                {
                    align: "center",
                    dataIndex: "formulaAuditState",
                    key: "formulaAuditState",
                    title: "状态",
                    customRender: (text: string, record: any, index: number) => {
                        const data = {
                            0: { title: "待填写", class: "status-words c-warning" },
                            1: { title: "已填写", class: "status-words c-primary" },
                            2: { title: "已公示", class: "status-words c-success" },
                        };
                        const dataOne = data[record.formulaAuditState] || {};
                        const dom = h("div", { class: dataOne.class }, dataOne.title);
                        return dom;
                    },
                },
                {
                    align: "center",
                    dataIndex: "action",
                    key: "action",
                    title: "操作",
                    width: 320,
                    scopedSlots: { customRender: "action" },
                },
            ]);
        } else {
            this.columns = this.defcolumns.concat([
                {
                    align: "center",
                    dataIndex: "action",
                    key: "action",
                    title: "操作",
                    width: 320,
                    scopedSlots: { customRender: "action" },
                },
            ]);
        }
    }

    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.beginTime = arr[0];
        this.pageParams.endTime = arr[1];
        this.resetList();
    }

    territoryList = [];
    async getTerritoryList() {
        this.loading = true;
        try {
            const res = await api.getSetting("3");
            this.territoryList = res.data;
        } finally {
            this.loading = false;
        }
    }

    detailVisible = false;
    detailId = "";
    clickDetail(item) {
        this.detailId = item.id;
        this.detailVisible = true;
    }

    editVisible = false;
    editInfo = "";
    clickEdit(item) {
        this.editInfo = item;
        this.editVisible = true;
    }

    clickFormula(item) {
        this.$confirm({
            title: "确定要进行公示吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.loading = true;
                try {
                    const res = await api.postFormula({ id: item.id, publicityType: this.pageType });
                    this.$message.success("操作成功");
                    this.getList();
                } finally {
                    this.loading = false;
                }
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }
    clickCancel(item) {
        this.$confirm({
            title: "确定要取消公示吗？",
            okText: "确定",
            cancelText: "取消",
            onOk: async () => {
                this.loading = true;
                try {
                    const res = await api.cancelFormula({ id: item.id, publicityType: this.pageType });
                    this.$message.success("操作成功");
                    this.getList();
                } finally {
                    this.loading = false;
                }
            },
            onCancel: () => {
                console.log("Cancel");
            },
        });
    }

    showEditListVisible = false;
    showEditListInfo = "";
    clickShowEditList(item) {
        this.showEditListInfo = item;
        this.showEditListVisible = true;
    }
}
</script>
<style scoped lang="scss">
.announcement-container {
}
</style>
